<template>
	<view>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
		<u-navbar title="支付" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>
		<view class="coreshop-bg-white coreshop-solid-bottom coreshop-padding-15">
			<u-icon name="checkmark-circle" size="16" color="orange" labelColor="orange" label="支付信息" labelSize="15px">
			</u-icon>
		</view>
		<!--商品信息-->
		<view class="coreshop-list menu">
			<view class="coreshop-list-item">
				<view class="content">
					<text class="coreshop-text-grey">订单类型</text>
				</view>
				<view class="action">
					<text class="coreshop-font-sm coreshop-text-gray"
						v-if="
						type == $globalConstVars.paymentType.common || 
						type == $globalConstVars.paymentType.pinTuan || 
						type == $globalConstVars.paymentType.group || 
						type == $globalConstVars.paymentType.seckill || 
						type == this.$globalConstVars.paymentType.bargain || 
						type == this.$globalConstVars.paymentType.giveaway || 
						type == $globalConstVars.paymentType.solitaire || 
						type == $globalConstVars.paymentType.transactionComponent"
					>商品订单
					</text>
					<text class="coreshop-font-sm coreshop-text-gray"
						v-if="type == $globalConstVars.paymentType.recharge" @click="toRecharge()">充值订单</text>
					<text class="coreshop-font-sm coreshop-text-gray"
						v-if="type == $globalConstVars.paymentType.formPay">付款码</text>
					<text class="coreshop-font-sm coreshop-text-gray"
						v-if="type == $globalConstVars.paymentType.formOrder">表单订单</text>
					<text class="coreshop-font-sm coreshop-text-gray"
						v-if="type == $globalConstVars.paymentType.serviceOrder">服务订单</text>
					<text class="coreshop-font-sm coreshop-text-gray"
						v-if="type == $globalConstVars.paymentType.cardOrder">卡项订单</text>
					<text class="coreshop-font-sm coreshop-text-gray"
						v-if="type == $globalConstVars.paymentType.projectOrder">项目订单</text>
				</view>
			</view>
			<template
				v-if="
				type == $globalConstVars.paymentType.common || 
				type == $globalConstVars.paymentType.pinTuan || 
				type == $globalConstVars.paymentType.group || 
				type == $globalConstVars.paymentType.seckill || 
				type == this.$globalConstVars.paymentType.bargain || 
				type == this.$globalConstVars.paymentType.giveaway || 
				type == $globalConstVars.paymentType.solitaire || 
				type == $globalConstVars.paymentType.transactionComponent"
			>
				<view class="coreshop-list-item">
					<view class="content">
						<text class="coreshop-text-grey">订单编号</text>
					</view>
					<view class="action">
						<text class="coreshop-text-grey coreshop-font-sm" v-for="(item, index) in orderInfo.rel"
							:key="index" @click="goOrderDetail(item.sourceId)">{{ item.sourceId}}</text>
					</view>
				</view>
				<view class="coreshop-list-item">
					<view class="content">
						<text class="coreshop-text-grey">订单金额</text>
					</view>
					<view class="action">
						<text
							class="coreshop-text-price coreshop-text-red coreshop-font-lg">{{ orderInfo.money}}</text>
					</view>
				</view>
			</template>
			<template v-else-if="type == $globalConstVars.paymentType.recharge">
				<view class="coreshop-list-item">
					<view class="content">
						<text class="coreshop-text-grey">充值金额</text>
					</view>
					<view class="action">
						<text class="coreshop-text-price coreshop-text-red coreshop-font-lg">{{ recharge }}</text>
					</view>
				</view>
			</template>
			<template v-else-if="type == $globalConstVars.paymentType.serviceOrder">
				<view class="coreshop-list-item">
					<view class="content">
						<text class="coreshop-text-grey">购买服务</text>
					</view>
					<view class="action">
						<text class="coreshop-font-sm coreshop-text-gray">{{ serviceInfo.title }}</text>
					</view>
				</view>
				<view class="coreshop-list-item">
					<view class="content">
						<text class="coreshop-text-grey">服务金额</text>
					</view>
					<view class="action">
						<text
							class="coreshop-text-price coreshop-text-red coreshop-font-lg">{{ serviceInfo.money }}</text>
					</view>
				</view>
			</template>
			<template v-else-if="type === $globalConstVars.paymentType.cardOrder">
				<view class="coreshop-list-item">
					<view class="content">
						<text class="coreshop-text-grey">购买卡项</text>
					</view>
					<view class="action">
						<text class="coreshop-font-sm coreshop-text-gray">{{ cardInfo.cardItemName }}</text>
					</view>
				</view>
				<view class="coreshop-list-item">
					<view class="content">
						<text class="coreshop-text-grey">卡项金额</text>
					</view>
					<view class="action">
						<text
							class="coreshop-text-price coreshop-text-red coreshop-font-lg">{{ cardInfo.orderAmount}}</text>
					</view>
				</view>
			</template>
			<template v-else-if="type === $globalConstVars.paymentType.projectOrder">
				<view class="coreshop-list-item">
					<view class="content">
						<text class="coreshop-text-grey">订单编号</text>
					</view>
					<view class="action">
						<text class="coreshop-font-sm coreshop-text-gray">{{ projectInfo.orderId }}</text>
					</view>
				</view>
				<view class="coreshop-list-item">
					<view class="content">
						<text class="coreshop-text-grey">项目金额</text>
					</view>
					<view class="action">
						<text
							class="coreshop-text-price coreshop-text-red coreshop-font-lg">{{ projectInfo.orderAmount }}</text>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="coreshop-list-item">
					<view class="content">
						<text class="coreshop-text-grey">支付金额</text>
					</view>
					<view class="action">
						<text class="coreshop-text-price coreshop-text-red coreshop-font-lg">{{ recharge }}</text>
					</view>
				</view>
			</template>

		</view>

		<view class="coreshop-bg-white coreshop-solid-bottom coreshop-padding-15  coreshop-margin-top-15">
			<u-icon name="checkmark-circle" size="16" color="orange" labelColor="orange" label="请点击选择以下支付方式"
				labelSize="15px"></u-icon>
		</view>

		<!--支付方式-->
		<view class="content">
			<!-- #ifdef MP-WEIXIN -->
			<payments-by-wx :orderId="orderId" :recharge="recharge" :type="type" :uid="userInfo.id"></payments-by-wx>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<payments-by-ali :orderId="orderId" :recharge="recharge" :type="type" :uid="userInfo.id"></payments-by-ali>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS || APP-PLUS-NVUE -->
			<payments-by-app :orderId="orderId" :recharge="recharge" :type="type" :uid="userInfo.id"></payments-by-app>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<payments-by-tt :orderId="orderId" :recharge="recharge" :type="type" :uid="userInfo.id"></payments-by-tt>
			<!-- #endif -->
		</view>
		<!--提示信息-->
		<view class="coreshop-text-gray coreshop-padding-10 coreshop-font-sm">
			注：如果您在支付中选择的支付方式不适合或异常，请再次选择其他支付方式。
		</view>
		<!-- 登录提示 -->
		<coreshop-login-modal></coreshop-login-modal>
	</view>
</template>
<script>
	// #ifdef MP-WEIXIN
	import paymentsByWx from '@/pages/payment/components/coreshop-paymentsByWx.vue'
	// #endif
	// #ifdef MP-ALIPAY
	import paymentsByAli from '@/pages/payment/components/coreshop-paymentsByAli.vue'
	// #endif
	// #ifdef APP-PLUS || APP-PLUS-NVUE
	import paymentsByApp from '@/pages/payment/components/coreshop-paymentsByApp.vue'
	// #endif
	// #ifdef MP-TOUTIAO
	import paymentsByTt from '@/pages/payment/components/coreshop-paymentsByTt.vue'
	// #endif
	export default {

		data() {
			return {
				orderId: 0,
				recharge: 0,
				serviceId: 0, //服务编号
				cardId:0, // 卡项编号
				type: 1, // 订单类型
				orderInfo: {}, // 订单详情
				userInfo: {}, // 用户信息
				serviceInfo: {}, // 服务信息
				cardInfo:{}, // 卡项信息
				projectInfo:{},
				formId: 0,
			}
		},
		components: {
			// #ifdef MP-WEIXIN
			paymentsByWx,
			// #endif
			// #ifdef MP-ALIPAY
			paymentsByAli,
			// #endif
			// #ifdef APP-PLUS || APP-PLUS-NVUE
			paymentsByApp,
			// #endif
			// #ifdef MP-TOUTIAO
			paymentsByTt
			// #endif
		},
		onLoad(options) {
			if(options.scene){
				let data = this.scene_decode(options.scene)
				this.orderId = data.orderId
				this.type =data.orderType
				console.log('scene', data, options)
			}else {
				this.orderId = options.orderId
				this.serviceId = Number(options.serviceId)
				this.cardId = Number(options.cardId)
				this.recharge = Number(options.recharge)
				this.type = Number(options.type)
				this.formId = Number(options.formId)
			}
			if (this.orderId && (this.type === this.$globalConstVars.paymentType.common || this.type === this
					.$globalConstVars.paymentType.pinTuan || this.type === this.$globalConstVars.paymentType.group || this
					.type === this.$globalConstVars.paymentType.seckill || this.type === this.$globalConstVars.paymentType
					.bargain || this.type === this.$globalConstVars.paymentType.giveaway || this.type === this
					.$globalConstVars.paymentType.solitaire || this.type === this.$globalConstVars.paymentType
					.transactionComponent || this.type === this.$globalConstVars.paymentType.cardOrder ||this.type === this.$globalConstVars.paymentType.projectOrder)) {
				// 商品订单
				this.getOrderInfo()
			} else if (this.recharge && this.type === this.$globalConstVars.paymentType.recharge) {
				// 充值订单 获取用户id
				this.getUserInfo()
			} else if (this.formId && (this.type === this.$globalConstVars.paymentType.formPay || this.type === this
					.$globalConstVars.paymentType.formOrder)) {
				// 表单订单 id传到订单上
				this.orderId = '' + this.formId
			} else if (this.type === this.$globalConstVars.paymentType.serviceOrder) {
				this.getServiceDetail()
			} 
			// else if(this.type === this.$globalConstVars.paymentType.cardOrder){
			// 	this.getCardDetail()
			// } else if(this.type === this.$globalConstVars.paymentType.projectOrder){
			// 	this.getOrderInfo()
			// }
			else {
				this.$refs.uToast.show({
					message: '订单支付参数错误',
					type: 'error',
					complete: function() {
						uni.navigateBack({ delta: 1 })
					}
				})
			}
		},
		methods: {
			scene_decode(e) {
				if (e === undefined) return {}
				let scene = decodeURIComponent(e),
					params = scene.split(',')
				return { orderType:Number(params[1]),orderId: params[0] }
			},
			// 获取订单详情
			getOrderInfo() {
				let data = {
					ids: this.orderId,
					paymentType: this.type
				}
				this.$u.api.paymentsCheckpay(data).then(res => {
					if (res.status) {
						this.orderInfo = res.data
						if(this.type === 11 ){
							this.cardInfo = res.otherData.data
						}else if(this.type === 12){
							this.projectInfo = res.otherData.data
						}
					}
				})
			},
			//获取服务详情
			getServiceDetail() {
				let data = { id: this.serviceId }
				this.$u.api.getServiceDetail(data).then(res => {
					if (res.status) {
						this.serviceInfo = res.data
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			//获取卡项详情
			getCardDetail() {
				let data = { id: this.cardId }
				this.$u.api.CardItemDetial(data).then(res => {
					if (res.status) {
						this.cardInfo = res.data.model
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			
			// 获取用户信息
			getUserInfo() {
				this.$u.api.userInfo().then(res => {
					if (res.status) {
						this.userInfo = res.data
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			// 跳转我的余额页面
			toRecharge() {
				this.$u.route('/pages/member/balance/index/index')
			}
		}
	}
</script>
<style lang="scss">
	@import "pay.scss";
</style>
